<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.js"></script>
    <style>
        #nav {
            margin-top: -10px;
        }

        #nav img {
            width: 44px;
            position: relative;
            top: 10px;
        }

        #nav li {
            display: inline-block;
        }

        #nav li:nth-child(2) {
            color: blue;
            margin-left: 5px;
        }

        #nav li:nth-child(4) {
            color: green;
            margin-left: 10px;
        }

        #spa {
            display: block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px;
            background-color: blue;
            position: relative;
            top: 10px;
            margin-left: 850px;
        }

        #tbody {
            background-color: #f2f2f2;
        }

        #box1 {
            background-color: #fff;
            width: 1150px;
            height: 70px;
            margin: auto;
            line-height: 70px;
        }

        #box1 a {
            text-decoration: none;
            color: #000;
        }

        #box1 img {
            margin-left: 20px;
            width: 15px;
            height: 20px;
            margin-right: 10px;

        }

        #box1 span {
            font-size: 10px;
            position: relative;
            top: -5px;
        }

        #box1 h4 {
            display: inline;
            margin-left: 380px;
        }

        #box3 li {
            margin-left: -40px;
            list-style: none;
            margin-bottom: 10px;
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
        }

        #box3 ul {
            width: 800px;
            background-color: #fff;
            margin-left: 50px;
            border-radius: 5px;
            margin-right: -30px;
        }

        #box3 {
            position: relative;
        }

        #span_5 span {
            color: green;

        }

        #span_5 span:nth-child(2) {
            margin-left: 620px;
        }

        #span_5 {
            padding-top: 10px;
            padding-bottom: 10px;
        }

        #box3 .judge_1 {
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #f2f2f2;
            text-align: center;
            line-height: 30px;
            margin-right: 10px;
        }

        #box4 {
            margin-left: -80px;
        }

        #box4 ul {
            background-color: #f2f2f2;
            width: 750px;

        }

        #box4 button {
            width: 200px;
            background-color: #0045de;
            margin-bottom: 20px;
            margin-left: 350px;
            height: 30px;
            color: #fff;
            border: none;
        }

        #right {

            position: absolute;
            left: 860px;
            top: 180px;
        }

        #right ul {
            width: 260px;
            height: 100px;
            margin-left: 50px;
            background-color: #fff;
            margin-top: -5px;
        }

        #right ul li {
            list-style: none;
            margin-top: 20px;

        }

        #right p {
            background-color: #fff;
            margin-left: 50px;
            margin-top: -20px;
            padding-left: 20px;
            height: 40px;
            line-height: 40px;
        }

        #right #span_8 {
            margin-left: 150px;
            padding-right: 10px;
            color: red;


        }

        #right button {
            background-color: green;
            color: #fff;
            border: none;
            width: 200px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            margin-top: 100px;
            margin-left: 50px;
        }

        #box7 span {
            background-color: #ccc;
            width: 50px;
            height: 50px;
            margin-right: 10px;
            text-align: center;
            line-height: 50px;
            display: inline-block;
            margin-bottom: 20px;

        }

        #box7 {
            width: 300px;
            margin-left: 50px;
            display: flex;
            flex-wrap: wrap;
        }



        .topic {
            display: none;
        }

        .topic:nth-child(1) {
            display: block;
        }


        .photo {
            background: url(./img/s.png);
            background-size: cover;
        }
    </style>
</head>

<body>
    <div id="nav">
        <ul>
            <li> <img src="./img/u15.png" alt=""></li>
            <li>蜗牛考试系统</li>
            <li><span id="spa"></span></li>
            <li>蜗牛测试账号</li>
        </ul>
    </div>
    <div id="tbody">
        <br><br>
        <div id="box1">
            <a href="./StartTest.html"><img src="./img/UF]@B_4[3OGI(Y7DBCV`A3L.png" alt=""><span>返回
                    [考试中...]</span></a>
            <h4>2021年第三季度Vue.js知识模拟考试</h4>
        </div>
        <div id="box3">
            <!-- <ul class="topic" style="display: block;">
                <li id="span_5">
                    <span>单选题</span> <span class="sum_1">第1题/共7道</span>
                </li>
                <liid id="noe"> 1.为了可以正确解析JSX语法，需要在
                    <script></script>标签中加入什么属性？（）
                </liid>
                <br><br>
                <li>&nbsp;&nbsp;&nbsp;<span id="a" class="judge_1">A</span>Type='text/babel</li>
                <li>&nbsp;&nbsp;&nbsp;<span id="b" class="judge_1">B</span>Type=text/javascript</li>
                <li>&nbsp;&nbsp;&nbsp;<span id="c" class="judge_1">C</span>Type=text/html</li>
                <li>&nbsp;&nbsp;&nbsp;<span id="d" class="judge_1">D</span>Type='text/babel</li>
                <div id="box4">
                    <ul>
                        <li class="judge"></li>
                        <li class="dui"></li>
                        <li class="jiexi"></li>
                    </ul>
                    <button class="btn_1">下一题</button>
                </div>
            </ul> -->
        </div>
        <div id="right">
            <ul>
                <li><br>考试成绩:<span id="time"></span><br></li>
                <li>考试时间: 115分钟 </li>
            </ul><br>
            <p>错题 </p>
            <div id="box7">
                <!-- <a href="javascript:;"><span class="photo">1</span></a>
                <a href="javascript:;"><span>2</span></a>
                <a href="javascript:;"><span>3</span></a>
                <a href="javascript:;"><span>4</span></a>
                <a href="javascript:;"><span>5</span></a>
                <a href="javascript:;"><span>6</span></a>
                <a href="javascript:;"><span>7</span></a> -->
            </div>
            <button id="jiaojuan">返回</button>
        </div>
        <br>
    </div>
</body>
<script>
    let num_4 = localStorage.getItem("sum1");
    console.log(num_4);
    $("#time").text(num_4 * 10 + "分");
    let data = JSON.parse(localStorage.getItem("errors"));//获取错题数据
    data.forEach((eitm, index) => {
        let num_7 = index + 1;
        let uls = `<ul class="topic" >
                <li id="span_5">
                    <span>单选题</span> 
                </li>
                <li>${num_7}.${eitm.analysis} </li>
                <br>
                <li><span class="judge_1">A</span>${eitm.options[0]}</li>
                <li><span class="judge_1">B</span>${eitm.options[1]}</li>
                <li><span class="judge_1">C</span>${eitm.options[2]}</li>
                <li><span class="judge_1">D</span>${eitm.options[3]}</li>
                <div id="box4">
                    <ul>
                        <li class="jiexi">解析:${eitm.topics}</li>
                    </ul>
                    <button class="btn_1">下一题</button>
                </div>
            </ul>`
        $("#box3").append(uls)
        let spans = ` <a href="javascript:;"><span>${num_7}</span></a>`;
        $("#box7").append(spans);
    });
    // 点击第几道题
    let index = 1;
    $("#box7 a").click(function () {
        $(".topic").eq($(this).index()).show().siblings(".topic").hide(); //当前标签添加背景图片
        $(this).children().addClass("photo").text(""); // 其他兄弟元素去掉背景图和文本
    })


    // 点击下一道题
    $("#box3").on("click", ".btn_1", function () {
     
        $(this).parents(".topic").next(".topic").show().siblings(".topic").hide();


        let sum = 7 - $(".photo").length - 1;
        if (sum < 0 || sum == 7) {
            return
        }

        console.log(index);
        let num = index + 1
        $("#box7 span").eq(index).addClass("photo").text("");
        if (index <= 6) {
            $(".sum_1").text("第" + num + "题共/7道");
            $("#span_8").text("未答" + sum + "题");
            index++
        }


    });

    $("#jiaojuan").click(function () {
        location.href = "./practiceTest.html";
    })

    $("#box7 span").eq(0).addClass("photo").text("");
</script>

</html>